<template>
  <div class="mine">
    <van-nav-bar title="会员中心" fixed placeholder/>
    <div class="header">
      <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
      <!-- <van-icon :name="userInfo.avatarImg" /> -->
      
      <router-link v-if="userInfo.nickName" to="/info" v-model="userInfo.nickName">{{userInfo.nickName}}</router-link>
      <router-link to="/login" v-else >立即登录</router-link>
    </div>

    <div class="order">
      <p>我的订单<span>></span> </p>
      <van-grid>
        <van-grid-item icon="pending-payment" text="待付款" />
        <van-grid-item icon="free-postage" text="待发货" />
        <van-grid-item icon="logistics" text="待收货" />
        <van-grid-item icon="sign" text="已收货" />
      </van-grid>
    </div>

    <div class="list">
      <van-grid >
        <van-grid-item icon="pending-payment" text="我的信息" to="/info"/>
        <van-grid-item icon="vip-card-o" text="我的会员卡" />
        <van-grid-item icon="after-sale" text="我的积分" />
        <van-grid-item icon="coupon-o" text="我的优惠劵" />
        <van-grid-item icon="paid" text="我的余额" />
        <van-grid-item icon="discount" text="我的砍价" />
        <van-grid-item icon="bullhorn-o" text="推广员中心" />
        <van-grid-item icon="location-o" text="收货人信息" to="/address" />
        <van-grid-item icon="revoke" text="退出登录" v-if="userInfo.nickName" @click="quit"/>
      </van-grid>
    </div>
<!-- <div>{{userInfo}}</div> -->
  </div>
</template>

<script>
import { getUserInfoApi } from "@/utils/api";
// // 从store中获取数据
// import { mapState } from "vuex";
export default {
  data() {
    return {
      userInfo: {}
    };
  },

  components: {},

  // computed: mapState(["userInfo"]),

  created() {
    this.getUser();
  },

  methods: {
    // 退出登录页
    quit() {
      localStorage.clear();
      this.userInfo={};
      // this.getUser();
      // this.$router.replace('/home/mine');
      // this.$router.go(0);//强制刷新
      // this.$store.commit("quitUser");
    },
    // 获得用户信息
    getUser() {
      getUserInfoApi({ token: localStorage.getItem("token") }).then(res => {
        if (res.status === "0") {
          console.log(res);
          this.userInfo = res.result;
        }
      });
    }
  }
};
</script>

<style lang="less"  scoped>
.mine {
  .header {
    padding: 40px 20px;
    height: 150px;
    background-color: #f8aa50;
    font-size: 18px;

    .van-icon__image {
      width: 50px;
      height: 50px;
      vertical-align: middle;
      margin-right: 10px;
    }
  }
  .order {
    width: 90%;
    margin: 10px auto;
    background-color: #fff;
    border-radius: 10px;

    p {
      font-size: 16px;
      padding: 10px;
      span {
        float: right;
      }
    }
  }
  .list {
    width: 90%;
    margin: auto;
    border-radius: 10px;
  }
}
</style>
